<template>
  <div style="height: calc(100vh - 216rpx );">
    
    <!-- <van-button type="info">111</van-button> -->
    <van-skeleton title :row="3" :loading="props.loading">
      <div class="scroll-begin">
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="$emit('getMore')"
          @scroll="scroll"
        >
          <div
            style="margin-bottom: 10px; border-bottom: 1px solid #f4f7f9"
            v-for="(item, index) in props.userList"
            :key="item.id"
          >
            <van-card
              :desc="item.profile"
              :title="item.username"
              :thumb="item.avatarUrl"
            >
              <template #tags>
                <van-tag
                  plain
                  type="primary"
                  v-for="(tag, index) in item.tags"
                  :key="index"
                  style="margin-left: 6px"
                  >{{ tag }}</van-tag
                >
              </template>
              <template #footer>
                <van-button size="small" @click="invite(item.id)" type="info">邀请</van-button>
              </template>
            </van-card>
          </div>
        </scroll-view>
      </div>
    </van-skeleton>

    
  </div>
</template>
<script setup>


import { ref, reactive,onMounted,defineEmits } from 'vue'
// scrollTop: 0,
const scrollTop = ref(0)
const old = reactive({
  scrollTop: 0,
})
// const userList = [
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
//   {
//     id: 1,
//     profile: '不知名描述',
//     username: 'peter',
//     avatarUrl:
//       'https://cravatar.cn/avatar/e1e7ba949ade0936e071132d2edd3b3c.png',
//     tags: ['java', '大一', '大二'],
//   },
// ]
const upper = () => {
  
}
const lower = () => {
  console.log('lower:')
  $emit('lower')

}
const scroll = (e) => {
  console.log('scroll:' + e)
  old.scrollTop = e.detail.scrollTop
}
const emits=defineEmits(["invite"])
const invite=(userId)=>{
  emits('invite',userId)
//   uni.requestSubscribeMessage({
//   tmplIds: ['lZH_Sb4eub8CNfw3EoEJ2PaJAQOG2u7jvTrCL0U7TwM'],
//   success (res) { 
//     console.log("订阅授权",res);
    
//   }
// })
}


const props = defineProps({
  userList:[],
  loading: true,
})


onMounted((e)=>{
  // getScrollHeight()
  console.log(props.userList);
  
})
</script>
<style>
.scroll-begin{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.scroll-Y {
		flex: 1;
    height: 0px;
	}


/* .scroll-Y {
		height: 300rpx;
	}
	
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	} */
</style>
